<template>
	<view style="padding: 20px;">
		<u-row justify="center" customStyle="margin-top: 200rpx;">
			<u--image shape="circle" src="/static/logo/logo_500_500.png" width="80px" height="80px"></u--image>
		</u-row>
		<u-row justify="center" customStyle="margin-top: 100rpx">
			<u-input v-model="phone" placeholder="请输入手机号" border="bottom">
				<template slot="suffix">
					<u-code ref="uCode" seconds="20" @change="codeChange" changeText="60秒重新获取"></u-code>
					<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
				</template>
			</u-input>
		</u-row>
		<u-row justify="center" customStyle="margin-top: 30rpx">
			<u-input v-model="smsCode" placeholder="请输入验证码" border="bottom">

			</u-input>
		</u-row>
		<u-row customStyle="margin-top: 30rpx;">
			<u-button @click="login" text="登录" customStyle="border-radius:10px;background-color:  #73de87;"></u-button>
		</u-row>
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';

	let that;
	export default {
		data() {
			return {
				phone: '',
				smsCode: '',
				tips: '',
				successUrl: '/pages/index/index',
			}
		},

		methods: {
			...mapActions(['userLoginAction']),
			onLoad: function(option) {
				console.log("phone login successUrl:", option)
				this.successUrl = option.successUrl;
			},
			codeChange(text) {
				this.tips = text;
			},
			login() {
				if (!this.phone) {
					uni.$u.toast('请填写手机号码');
					return;
				}
				if (!this.smsCode) {
					uni.$u.toast('请填写验证码');
					return;
				}
				that = this;
				wx.login({
					success: res => {
					this.$http_api.loginBySmsCode({
						phone: this.phone,
						smsCode: this.smsCode,
						loginCode: res.code,
					}).then((res) => {
						if (res) {
							console.log("******************", that.successUrl)
							that.userLoginAction(res);
							that.$refs.uToast.show({
								type: 'default',
								position: 'center',
								message: "登录成功",
								complete() {
									if (that.successUrl) {
										const pages = getCurrentPages();
										console.log("pages:", pages)
										const backIndex = 0;
										for (var i = 0; i < pages.length; i++) {
											const page = pages[i];
											console.log("page:", page);
											if (page.route == that.successUrl) {
												backIndex = i;
											}
										}
										uni.navigateBack({
											delta: backIndex,
											success: function() {
												const pages = getCurrentPages(); //获取当前页面栈
												const prevPage = pages[pages.length -
												1]; //获取上一个页面实例对象
												prevPage.onLoad(); //调用上一个页面的onLoad方法
												console.log(prevPage.route + "刷新")
											}
										});
					
									}
								}
							})
						}
					});	
					}
				});
			},
			async getCode() {
				if (!this.phone) {
					uni.$u.toast('请填写手机号码');
					return;
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					await this.$http_api.loginSendSmsCode({
						phone: this.phone
					});
					// console.log("----------",codeResult)
					// if (codeResult) {
					uni.hideLoading();
					uni.$u.toast('验证码已发送');
					this.$refs.uCode.start();
					// }

					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	uni.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			gotoWeb: function(url) {
				uni.navigateTo({
					url: `/pages/webview/webview?url=${url}`
				})
			}
		}
	}
</script>

<style scoped>
	.login {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.title {
		font-size: 30px;
	}

	.input-item {
		margin-top: 20px;
	}

	.text {
		width: 80px;
	}
</style>